---
type: tutorial
title: Crea un componente di Navigazione riutilizzabile
description: |-
  Tutorial: Crea il tuo primo blog Astro —
  Sostituisci gli elementi ripetuti su più pagine con un componente riutilizzabile
i18nReady: true
---
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

Ora che hai lo stesso HTML scritto in più pagine del tuo sito Astro, è il momento di sostituire quel contenuto duplicato con un componente Astro riutilizzabile!

<PreCheck>
  - Crea una nuova cartella per i componenti
  - Costruisci un componente Astro per visualizzare i tuoi link di navigazione
  - Sostituisci l'HTML esistente con un nuovo componente di navigazione riutilizzabile
</PreCheck>

## Crea una nuova cartella `src/components/`

Per contenere i file `.astro` che genereranno HTML ma che non diventeranno nuove pagine sul tuo sito web, avrai bisogno di una nuova cartella nel tuo progetto: `src/components/`.


## Crea un componente Navigation

<Steps>
1. Crea un nuovo file: `src/components/Navigation.astro`.

2. Copia i tuoi link per navigare tra le pagine dalla parte superiore di qualsiasi pagina e incollali nel tuo nuovo file, `Navigation.astro`:

    ```astro title="src/components/Navigation.astro" "---"
    ---
    ---
    <a href="/">Home</a>
    <a href="/about/">Su di me</a>
    <a href="/blog/">Blog</a>
    ```
    :::tip
    Se non c'è nulla nel frontmatter del tuo file `.astro`, non devi scrivere i recinti di codice. Puoi sempre riaggiungerli quando ne hai bisogno.
    :::
</Steps>

### Importa e usa Navigation.astro

<Steps>
1. Torna a `index.astro` e importa il tuo nuovo componente all'interno del recinto di codice:

    ```astro title="src/pages/index.astro" ins={2}
    ---
    import Navigation from '../components/Navigation.astro';
    import "../styles/global.css";

    const pageTitle = "Pagina iniziale";
    ---
    ```

2. Poi sotto, sostituisci gli elementi HTML di link di navigazione esistenti con il nuovo componente di navigazione che hai appena importato:

    ```astro title="src/pages/index.astro" del={1-3} ins={4}
    <a href="/">Home</a>
    <a href="/about/">Su di me</a>
    <a href="/blog/">Blog</a>
    <Navigation />
    ```

3. Controlla l'anteprima nel tuo browser e nota che dovrebbe apparire esattamente uguale... ed è quello che vuoi!
</Steps>

Il tuo sito contiene lo stesso HTML di prima. Ma ora, quelle tre righe di codice sono fornite dal tuo componente `<Navigation />`.

<Box icon="puzzle-piece">

## Prova tu stesso - Aggiungi la navigazione al resto del tuo sito

Importa e usa il componente `<Navigation />` nelle altre due pagine del tuo sito (`about.astro` e `blog.astro`) usando lo stesso metodo.

Non dimenticare di
- Aggiungere una dichiarazione di importazione nella parte superiore dello script del componente, all'interno del recinto di codice.
- Sostituire il codice esistente con il componente di navigazione.

</Box>

:::note
Quando ristrutturi il tuo codice ma non cambi l'aspetto della tua pagina nel browser, stai effettuando un **refactoring**. Effettuerai il **refactoring** diverse volte in questa unità man mano che sostituisci parti dell'HTML della tua pagina con componenti.

Questo ti permette di iniziare rapidamente con qualsiasi codice funzionante, spesso duplicato in tutto il tuo progetto. Poi, puoi migliorare gradualmente il design del tuo codice esistente senza cambiare l'aspetto esteriore del tuo sito.
:::



<Box icon="question-mark">

### Metti alla prova le tue conoscenze



1. Puoi fare questo quando hai elementi ripetuti su più pagine:
    <MultipleChoice>
      <Option>
        riavviare il server di sviluppo
      </Option>
      <Option isCorrect>
        eseguire il refactoring per usare un componente riutilizzabile
      </Option>
      <Option>
        creare una nuova pagina
      </Option>
    </MultipleChoice>

2. I componenti Astro sono:
    <MultipleChoice>
      <Option>
        riutilizzabili
      </Option>
      <Option>
        frammenti di HTML
      </Option>
      <Option isCorrect>
        entrambi i precedenti!
      </Option>
    </MultipleChoice>

3. I componenti Astro creeranno automaticamente una nuova pagina sul tuo sito quando...
    <MultipleChoice>
      <Option>
        includi `<html></html>`
      </Option>
      <Option>
        esegui il refactoring
      </Option>
      <Option isCorrect>
        metti il file `.astro` all'interno di `src/pages/`
      </Option>
    </MultipleChoice>
</Box>

<Box icon="check-list">

## Checklist

<Checklist>
- [ ] Posso eseguire il refactoring del contenuto in componenti riutilizzabili.
- [ ] Posso aggiungere un nuovo componente a una pagina `.astro`.
</Checklist>

</Box>

### Risorse

- [Panoramica sui Componenti Astro](/it/basics/astro-components/)

- [Refactoring](https://refactoring.com/) <Badge class="neutral-badge" text="external" />
